<template>
    <div class="footerMusic">
        <div class="footerLeft" @click="updateDetailShow">
            <img :src="playList[playListIndex].al.picUrl" alt="">
            <div>
                <p>{{playList[playListIndex].name}}</p>
                <span>横滑可以切换上下首哦</span>
            </div>
        </div>
        <div class="footerRight">
            <svg class="icon" aria-hidden="true"  v-if="isbtnShow"   @click="play">
                    <use xlink:href="#icon-24gl-playCircle"></use>
            </svg>
            <svg class="icon" aria-hidden="true" v-else   @click="play">
                    <use xlink:href="#icon-zanting"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-zu"></use>
            </svg>
        </div>
        <audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`"></audio>
        <!-- 歌曲详情页 -->
        <van-popup v-model:show="detailShow" position="bottom" :style="{ height: '100%' }">
            <MusicDetail 
                :musicList="playList[playListIndex]" 
                :play="play" 
                :isbtnShow="isbtnShow"
                :addDuration="addDuration"
        />
        </van-popup>
    </div>
</template>

<script>
import {mapMutations, mapState} from 'vuex'
import MusicDetail from '@/components/item/MusicDetail'
export default {
    data(){
        return{
            interVal:0
        }
    },
    computed:{
        ...mapState(['playList','playListIndex','isbtnShow','detailShow'])
    },
    mounted(){
        console.log(this.$refs)
        this.$store.dispatch("getLyric",this.playList[this.playListIndex].id)
        this.updateTime()//底部播放的时候也需要调用这个函数
    },
    updated(){
        this.$store.dispatch("getLyric",this.playList[this.playListIndex].id)
        this.addDuration()
    },
    methods:{
        play:function(){
            // 判断音乐是否播放，没有播放就播放，播放就暂停
            if(this.$refs.audio.paused){
                this.$refs.audio.play()
                this.updateIsbtnShow(false)
                this.updateTime() //播放就调用函数进行传传值
            }else{
                this.$refs.audio.pause()
                this.updateIsbtnShow(true)
                clearInterval(this.interVal) //暂停就清除定时器
            }
        },
        addDuration:function(){
            this.updateDuration(this.$refs.audio.duration)
        },
        updateTime:function(){
            this.interVal=setInterval(()=>{
                this.updateCurrentTime(this.$refs.audio.currentTime)
            },500)
        },
        ...mapMutations(['updateIsbtnShow','updateDetailShow','updateCurrentTime','updateDuration']),
    },
    // 监听下标，如果下标发生了改变，自动播放音乐
    watch:{
        playListIndex:function(){
            this.$refs.audio.autoplay=true
            if(this.$refs.audio.play){   //如果是暂停状态，改变图标
                this.updateIsbtnShow(false)
            }
        },
        playList:function(){ //因为第一首歌的下标没有改变，所有需要监听歌曲列表
            if (this.isbtnShow) {
                this.$refs.audio.autoplay=true
                this.updateIsbtnShow(false)
            }
        }
    },
    components:{MusicDetail}
}
</script>

<style lang="less" scoped>
    .footerMusic{
        width: 100%;
        height: 1.3rem;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        border-top: 1px solid #999;
        display: flex;
        justify-content: space-between;
        padding: .2rem;
        .footerLeft{
            width: 60%;
            height: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            div{
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                padding-left: .6rem;
            span{
                font-size: .25rem;
                color: #999;
            }
            }
            img{
                width: 1rem;
                height: 1rem;
                border-radius: 50%;
            }
        }
        .footerRight{
            width: 20%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .icon{
                width: .6rem;
                height: .6rem;
            }
        }
    }
</style>